<template>
  <div ref="dom" class="charts chart-china"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'

// 省份
import '../../../../node_modules/echarts/map/js/province/anhui.js'
import '../../../../node_modules/echarts/map/js/province/aomen.js'
import '../../../../node_modules/echarts/map/js/province/beijing.js'
import '../../../../node_modules/echarts/map/js/province/chongqing.js'
import '../../../../node_modules/echarts/map/js/province/fujian.js'
import '../../../../node_modules/echarts/map/js/province/gansu.js'
import '../../../../node_modules/echarts/map/js/province/guangdong.js'
import '../../../../node_modules/echarts/map/js/province/guangxi.js'
import '../../../../node_modules/echarts/map/js/province/guizhou.js'
import '../../../../node_modules/echarts/map/js/province/hainan.js'
import '../../../../node_modules/echarts/map/js/province/hebei.js'
import '../../../../node_modules/echarts/map/js/province/heilongjiang.js'
import '../../../../node_modules/echarts/map/js/province/henan.js'
import '../../../../node_modules/echarts/map/js/province/hubei.js'
import '../../../../node_modules/echarts/map/js/province/hunan.js'
import '../../../../node_modules/echarts/map/js/province/jiangsu.js'
import '../../../../node_modules/echarts/map/js/province/jiangxi.js'
import '../../../../node_modules/echarts/map/js/province/jilin.js'
import '../../../../node_modules/echarts/map/js/province/liaoning.js'
import '../../../../node_modules/echarts/map/js/province/neimenggu.js'
import '../../../../node_modules/echarts/map/js/province/ningxia.js'
import '../../../../node_modules/echarts/map/js/province/qinghai.js'
import '../../../../node_modules/echarts/map/js/province/shandong.js'
import '../../../../node_modules/echarts/map/js/province/shanghai.js'
import '../../../../node_modules/echarts/map/js/province/shanxi.js'
import '../../../../node_modules/echarts/map/js/province/shanxi1.js'
import '../../../../node_modules/echarts/map/js/province/sichuan.js'
import '../../../../node_modules/echarts/map/js/province/taiwan.js'
import '../../../../node_modules/echarts/map/js/province/tianjin.js'
import '../../../../node_modules/echarts/map/js/province/xianggang.js'
import '../../../../node_modules/echarts/map/js/province/xinjiang.js'
import '../../../../node_modules/echarts/map/js/province/xizang.js'
import '../../../../node_modules/echarts/map/js/province/yunnan.js'
import '../../../../node_modules/echarts/map/js/province/zhejiang.js'
echarts.registerTheme('tdTheme', tdTheme)

export default {
  name: 'ChartProvince',

  props: {
    value: Array,
    color: Array,
    text: String,
    subtext: String,
    mapType: String
  },

  data () {
    return {
      dom: null
    }
  },

  watch: {
    value: {
      handler (val, oldVal) {
        this.value = val
        this.initChina()
      }
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.initChina()
    })
  },

  methods: {
    resize () {
      this.dom.resize()
    },

    initChina () {
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          padding: [10, 20, 10, 20],
          formatter: function (params) {
            if (params.data) {
              return `
                <div class="line-h-28">
                  <p class="font-16 pb-5">${params.data.name}</p>
                  <p>客户数量：<span class="text-warning2 font-16 font-weight pr-5">${params.data.companyCount}</span>家</p>
                  <p>人事代理：<span class="text-warning2 font-16 font-weight pr-5">${params.data.agentCount}</span>家</p>
                  <p>劳务派遣：<span class="text-warning2 font-16 font-weight pr-5">${params.data.laborDispatchCount}</span>家</p>
                  <p>劳务外包：<span class="text-warning2 font-16 font-weight pr-5">${params.data.outsourcingCount}</span>家</p>
                  <p>员工数量：<span class="text-warning2 font-16 font-weight pr-5">${params.data.empCount}</span>人</p>
                  <p>在职：<span class="text-warning2 font-16 font-weight pr-5">${params.data.beHiringCount}</span>人</p>
                  <p>离职：<span class="text-warning2 font-16 font-weight pr-5">${params.data.noBeHiringCount}</span>人</p>
                </div>
              `
            } else {
              return `
                <div class="line-h-28">${params.name} 暂无数据</div>
              `
            }
          }
        },
        color: this.color,
        series: {
          type: 'map',
          mapType: this.mapType,
          roam: true,
          label: {
            normal: {
              show: true,
              color: '#54acd7',
              formatter: function (params) {
                return params.data ? params.data.fullName : params.name
              }
            },
            emphasis: {
              show: true,
              color: '#000'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#9dd9fd',
              borderColor: '#d3f3ff'
            },
            emphasis: {
              show: true,
              color: '#fff',
              areaColor: '#ffcc3b'
            }
          },
          data: this.value
        }
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)

      var that = this
      this.dom.off('click')
      this.dom.on('click', function (params) {
        var data = {
          flag: 2,
          name: params.name
        }
        that.$emit('getBills', data)
        that.$emit('getCityData', params.data)
      })
    }
  },

  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>

<style lang="less" scoped>
</style>
